<template>
	<view class="box">
		<view class="boxTop">

			<view class="boxTopTool">
				<view class="boxTopToolLeft">
					100
				</view>
				<view class="boxTopToolRight">
					{{buletList}} / 25 <view class="">
						<image style="width: 70rpx;height: 80rpx;" src="../../static/bullet/zidan.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="boxBottom">
			<view class="boxBottombK">

			</view>

			<view class="boxBottomRen" @touchmove="humanMovement" :style="{'left':humanMovementX + 'px'}">
				<image src="../../static/userinfor/user.png"
					style="width: 110rpx; height: 160rpx; transform: translateY(-50rpx);z-index: 9;" mode=""></image>
				<!-- 子弹容器 -->
				<view class="boxBottomRenbulletBox">
					<image src="../../static/gun/m4.png"
						style="position: absolute; top: -250rpx;left: 20rpx;  width: 80rpx; height: 130rpx;" mode="">
					</image>

					<view class="" v-for="item in buletList" :key="item">
						<view class="zidan" :style="{'left':humanMovementX + 'px','top': '-' + 0 + 'px'}">
							<image style="width: 40rpx;height: 55rpx;" src="../../static/bullet/zidan.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<intPlay></intPlay>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue'
	// 关卡列表
	const LevelsList = reactive([])
	// 人物移动
	const humanMovementX = ref(150)
	// 子弹数量
	const buletList = ref(25)
	// 子弹列表
	const bulletList = reactive({
		x: 0,
		y: 0,
		// 伤害
		damage: 10,
		// 是否穿透
		WhetherPenetrate: false
	})
	// 可是窗口宽高
	const windowHeight = ref(0)
	const windowWidth = ref(0)
	// 人物移动
	const userMove = reactive({
		x: 0,
		state: 0
	})
	onShow(() => {
		setnBullet()
		getSystemInfo()



	})

	function init() {
		// 人物移动
		// 每颗子弹复制x y 将 y 进行-= 赋值


		// 随机x轴生成指定数量怪物 

		// 子弹的x y 和怪物的 x y 相交则进行 血量--

		// 怪物 到达目标地根据数量累计定时扣血
	}

	function getSystemInfo() {
		const res = uni.getSystemInfoSync()
		windowHeight.value = res.windowHeight
		windowWidth.value = res.windowWidth
	}
	// 人物移动
	// 子弹
	function setnBullet() {
		// bulletTimeSend.value = setInterval(() => {
		// 	if (bullet.value >= windowHeight.value) {
		// 		buletList.value = buletList.value
		// 		if (buletList.value <= 0) {
		// 			setTimeout(() => {
		// 				uni.showToast({
		// 					title: '换子弹中',
		// 					icon: 'loading'
		// 				})
		// 			}, 1500)
		// 			clearInterval(bulletTimeSend.value)
		// 		}
		// 		bullet.value = 0
		// 	} else {
		// 		bullet.value = bullet.value += 10
		// 	}
		// }, 40)
	}


	// 人物移动
	function humanMovement(e) {
		console.log(e.changedTouches[0].clientX);
		if (e.changedTouches[0].clientX <= 0 || e.changedTouches[0].clientX >= (windowWidth.value - 50)) {
			return
		}
		// if (e.changedTouches[0].clientX <= 0 || e.changedTouches[0].clientX >= 300) {
		// 	return
		// }
		console.log(e.changedTouches[0].clientX);
		humanMovementX.value = e.changedTouches[0].clientX
		// left 子弹出发点
		// top 子弹落点

	}
</script>

<style lang="scss">
	.box {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		// background: url('https://img0.baidu.com/it/u=2881757489,1781649116&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=746') 100% 100% no-repeat;

		.boxTop {
			background-color: #fff;
			flex: 1;
			position: relative;

			.boxTopTool {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				display: flex;
				align-items: center;
				padding: 15rpx;
				justify-content: space-between;

				.boxTopToolLeft {
					width: 200rpx;
					background-color: #62d548;
					border-radius: 444rpx;

					display: flex;
					justify-content: center;
					align-items: center;
					color: #e9e6f0;
					font-size: 26rpx;
					height: 40rpx;
					font-weight: 600;
					position: relative;
					z-index: 10;
				}

				.boxTopToolRight {
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 600;
					color: #aa5500;
					z-index: 10;
				}

				.boxTopToolLeft::before {
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					z-index: 99;
					content: '';
					width: 190rpx;
					border: #369f35 solid 4rpx;
					border-radius: 444rpx;
					text-align: center;
					font-size: 26rpx;
					font-weight: 600;
				}


			}
		}

		.boxBottom {
			position: relative;
			height: 140rpx;

			.boxBottombK {
				position: relative;
				z-index: 0;

				background: url('../../static/checkponintList/zhalan.png') repeat-x;
				background-size: 200rpx 50rpx;
				height: 100%;

				// .boxBottombKBG {
				// 	background: url('https://img0.baidu.com/it/u=2881757489,1781649116&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=746') 100% 100% no-repeat;
				// 	width: 100%;
				// 	height: 100%;
				// 	z-index: -2;
				// }


			}



			.boxBottomRen {
				position: absolute;
				left: 0;
				top: 40rpx;
				height: 100rpx;
			}

			.boxBottomRenbulletBox {
				position: relative;

				.zidan {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translateX(-50%) translateY(50%);
					color: #2f4bff;
				}
			}
		}
	}
</style>